import Chart from './chart';
import * as com from './common';
import * as opt from './option';
import $ from 'jquery';
import Node, {ROTATE, Type, CURSOR} from './base';
import * as Util from '../js/util';

const name = 'pie';
const image = 'pieBase.png';

function getOption () {
  let option = {
    title: {
      text: '饼图'
    },
    grid: {},
    series: [
      {
        name: '来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          {value: 335, name: '直接访问'},
          {value: 310, name: '邮件营销'},
          {value: 234, name: '联盟广告'},
          {value: 135, name: '视频广告'},
          {value: 1548, name: '搜索引擎'}
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ],
    _series: $.extend(getSerie(), {
      label: $.extend(opt.getLabel(), {show: true, position: 'outside', color: ''}),
      itemStyle: opt.ItemStyle(),
      labelLine: getLabelLine()
    })
  };
  $.extend(option.title, opt.getTitle());
  $.extend(option.grid, opt.getGrid());

  com.SyncSeries (option);
  return option;
}

function getStyle (option) {
  return [
    com.Title(option),
    Serie(option._series),
    com.GetOption('Label', option._series),
    com.GetOption('ItemStyle', option._series),
    LabelLine(option._series.labelLine),
    com.GetOption('Grid', option)
  ]
}

// 提示线属性列表
function LabelLine (parent) {
  return {
    'name': '引导线',
    'children': Util.flat([
      new Node('是否显示', 'show', parent, Type.Boolean),
      new Node('一段长度', 'length', parent, Type.Value),
      new Node('二段长度', 'length', parent, Type.Value),
      new Node('是否平滑', 'smooth', parent, Type.Boolean),
      com.LineStyle(parent.lineStyle)
    ])
  };
}

function getLabelLine () {
  return {
    show: true,
    length: 15,
    length2: 15,
    smooth: false,
    lineStyle: opt.LineStyle()
  };
}

// 图形主要设置
function Serie (parent) {
  return {
    'name': '图形设置',
    'children': [
      new Node('允许高亮', 'legendHoverLink', parent, Type.Boolean),
      new Node('高亮放大', 'hoverAnimation', parent, Type.Boolean),
      new Node('高亮偏移', 'hoverOffset', parent, Type.Value),
      new Node('是否多选', 'selectedMode', parent, Type.Boolean),
      new Node('选中偏移', 'selectedOffset', parent, Type.Value),
      new Node('顺时针', 'clockwise', parent, Type.Boolean),
      new Node('起始角度', 'startAngle', parent, Type.Range, ROTATE),
      new Node('最小角度', 'minAngle', parent, Type.Range, ROTATE),
      new Node('玫瑰图', 'roseType', parent, Type.Boolean),
      new Node('防重叠', 'avoidLabelOverlap', parent, Type.Boolean),
      new Node('零值显示', 'stillShowZeroSum', parent, Type.Boolean),
      new Node('鼠标样式', 'cursor', parent, Type.Select, CURSOR),
      new Node('中心', 'center', parent, Type.ArrayText, ['50%', '50%'], ['横', '纵']),
      new Node('半径', 'radius', parent, Type.ArrayText, ['0', '75%'], ['内', '外'])
    ]
  };
}

function getSerie () {
  return {
    legendHoverLink: true,
    hoverAnimation: true,
    hoverOffset: 10,
    selectedMode: false,
    selectedOffset: 10,
    clockwise: true,
    startAngle: 90,
    minAngle: 0,
    roseType: false,
    avoidLabelOverlap: true,
    stillShowZeroSum: true,
    cursor: 'pointer',
    center: ['50%', '50%'],
    radius: [0, '75%']
  };
}

function draw (id, option) {
  if (!option) option = getOption();
  com.SyncSeries(option);
  Chart.draw(id, option, name);
}

const Pie = {
  name: name,
  image: image,
  getOption: getOption,
  getStyle: getStyle,
  draw: draw
};

Chart.register(name, Pie);

export default Pie;
